Menu rollover doesn't work with IE6

[dharmbhav]

Hello all,

I am trying to develop a roll-over menu effect on a page. It works fine with all other browsers except IE6. Can some one please help me?

HTML:

<div class="menu-item-wrap">
                    <a href="#" class="menu-item-text">
                        Menu1                    
                    </a>
                    <div class="menu-item-divider"></div>
                    <div class="clear"></div>
                    <div class="submenu-wrap">                    
                            <table class="menu-item-table" cellpadding="0" cellspacing="0">
                                <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">Sub Menu Item 1 of Menu 1</a></td></tr>
                                <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">Sub Menu Item 2</a></td></tr>
                                <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">Sub Menu Item 3</a></td></tr>
                                <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">Sub Menu Item 4</a></td></tr>
                            </table>
                    </div>                    
                </div>
 
 
                <div class="menu-item-wrap">
                    <a href="#" class="menu-item-text">
                        This is Menu2
                    </a>
                    <div class="menu-item-divider"></div>
                    <div class="clear"></div>
                    <div class="submenu-wrap">                    
                        <table class="menu-item-table" cellpadding="0" cellspacing="0">
                            <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">Sub Menu Item 1 of 2</a></td></tr>
                            <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">MenuItem2</a></td></tr>
                            <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">MenuItem3</a></td></tr>
                        </table>
                    </div>                    
                </div>
 
 
                <div class="menu-item-wrap">
                    <a href="#" class="menu-item-text">
                        Menu3
                    </a>
                    <div class="menu-item-divider"></div>
                    <div class="clear"></div>
                    <div class="submenu-wrap">                    
                        <table class="menu-item-table" cellpadding="0" cellspacing="0">
                            <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">Sub Menu Item 1/3</a></td></tr>
                            <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">MenuItem2</a></td></tr>
                            <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">MenuItem3</a></td></tr>                            
                        </table>
                    </div>                    
                </div>
 

CSS:

.menu-item-wrap
{
    float:left;    
    padding-left:5px;    
}
A.menu-item-text
{
    text-decoration:none;
    color:#000000;
    float:left;
    padding-left:5px;
    padding-right:10px;
}
.menu-item-divider
{
    width:1px;
    height:30px;
    background-image: url(../Images/menubar.png);
    background-repeat:no-repeat;
    float:left;
    margin-top:-2px;    
}
TABLE.menu-item-table
{
    position:absolute;
    overflow:visible;
    margin-top:-3px;
    margin-left:-6px;    
    border-top:solid 1px #CBD1E0;        
}
TABLE.menu-item-table TD.submenu-td
{
    background-color:#EEE9A8;
    border-bottom:solid 1px #CBD1E0;
    border-left:solid 1px #CBD1E0;
    border-right:solid 1px #CBD1E0;
}
A.submenu-link
{
    text-decoration:none;
    color:#354260;
    padding:2px 10px;    
    display:block;
    width:100%;
}
A:hover.submenu-link 
{    
    color:#354260;
    display:block;
}
TABLE.menu-item-table TD.menu-selected-cell
{
    background-color:#CBD1E0;    
}
.submenu-wrap
{
    display:none;        
}
.submenu-wrap-show
{
    display:block;        
    -width:300px;            
}
 
 javascript:
var $j = jQuery.noConflict();
$j(document).ready(function(){
 
    $j("TD.submenu-td").hover(        
        function(){
            $j(this).addClass("menu-selected-cell");                
        },
        function(){
            $j(this).removeClass("menu-selected-cell");
        }
    );
 
    $j(".menu-item-wrap").hover(
        function(){$j("div.submenu-wrap",this).fadeIn(100); },
        function(){$j("div.submenu-wrap",this).fadeOut(100);}
    );
    if(document.all){
        $j(".menu-item-wrap").hoverClass("submenu-wrap-show");
    }    
});
$j.fn.hoverClass = function(c){
    return this.each(function(){
        $j(this).hover(
            function() { $j(this).addClass(c); },
            function() {$j(this).removeClass(c);}
        );            
    });
};
 

Thanks in advance,
DK.

[dharmbhav]

Oh I just solved it:

CSS:

TABLE.menu-item-table
{
    position:absolute;
    overflow:visible;
    margin-top:-3px;
    margin-left:-6px;    
    border-top:solid 1px #CBD1E0;        
    -width:200px;
}
.submenu-wrap
{
    display:none;        
    -position:absolute;
}
.submenu-wrap-show
{
    display:block;        
    width:auto;
}
 

[numberwhun]

You really need to please use code tags around any code you place into the forums. Its a requirement.

Regards,

Jeff